<script
  lang="ts"
  setup
>
import { ChatLineRound, Share, Star } from '@element-plus/icons-vue'
import {
  expertDataList,
  getExpertList,
  userFollowDoctor,
  userFollowDoctorSelect,
  userUnFollowDoctor,
} from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const dayjs = useDayjs()
const router = useRouter()
const TJlist = ref<any[]>([])
const listAll = ref<any[]>([])
const fileData = ref()
const activeName = ref('全部')
const title = ref('人物库')
const routePath = [{ name: '首页', path: '/' }, { name: title, type: 'back' }, { name: '人物详情', path: '' }]
const route = useRoute()
const { isLogin, loginVisible } = storeToRefs(useUserStore())

fileData.value = decode(route.query.data)
const queryParams = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'publisher',
        ruleType: 'eq',
        value: fileData.value.name,
      },
    ],
  },
)
const queryParams1 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'publisher',
        ruleType: 'eq',
        value: fileData.value.name,
      },
      {
        colName: 'publish_type',
        ruleType: 'eq',
        value: '文章',
      },
    ],
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'publisher',
        ruleType: 'eq',
        value: fileData.value.name,
      },
      {
        colName: 'publish_type',
        ruleType: 'eq',
        value: '视频',
      },
    ],
  },
)
const queryParams3 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'publisher',
        ruleType: 'eq',
        value: fileData.value.name,
      },
      {
        colName: 'publish_type',
        ruleType: 'eq',
        value: '音频',
      },
    ],
  },
)
const queryParams4 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [
      {
        colName: 'publisher',
        ruleType: 'eq',
        value: fileData.value.name,
      },
      {
        colName: 'publish_type',
        ruleType: 'eq',
        value: '问答',
      },
    ],
  },
)
function getData() {
  getExpertList().then((res) => {
    TJlist.value = res.data.slice(0, 3)
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
  getDataList(queryParams)
})
function clickItem(item: any) {
  getExpertList({
    condition: [{ colName: 'uid', ruleType: 'eq', value: item.uid }],
  }).then((res) => {
    fileData.value = res.data[0]
  })
}

function handleClick(tab) {
  console.log(tab.props.name)
  if (tab.props.name === '文章') {
    getDataList(queryParams1)
  }
  else if (tab.props.name === '视频') {
    getDataList(queryParams2)
  }
  else if (tab.props.name === '音频') {
    getDataList(queryParams3)
  }
  else if (tab.props.name === '问答') {
    getDataList(queryParams4)
  }
  else {
    getDataList(queryParams)
  }
}
function toConsult(item) {
  if (!isLogin.value) {
    loginVisible.value = true
    return ElMessage.error('请先登录')
  }
  navigateTo({
    path: `/peopleHealth/consult`,
    query: {
      data: encode(item),
    },
  })
}
function clickDataItem(item) {
  console.log(item)
  // if (item.info === '文章') {
  queryParams.condition.push({
    colName: 'uid',
    ruleType: 'eq',
    value: item.uid,
  })
  expertDataList(queryParams).then((res) => {
    navigateTo({
      path: `/peopleHealth/popularizationDetail/${res.data[0].id}&专家作品`,
      query: {
        backText: '专家信息',
      },
    })
  })
}
function getDataList(queryParam: any) {
  listAll.value = []
  expertDataList(queryParam).then((res) => {
    res.data.forEach((item) => {
      listAll.value.push({
        title: item.title_name,
        blurd: extractTextFromPTags(item.contents),
        info: item.publish_type,
        time: dayjs(item.release_time).format('YYYY-MM-DD'),
        url: getImgUrl(item.cover_file_name, true),
        viewNum: item.page_view_num,
        uid: item.uid,
      })
    })
    collectSelect()
  })
}
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}

const followFlag = ref(1)
const tempId = ref()
// 修改用户关注
function changeArticleFollow(id) {
  if (!isLogin.value) {
    loginVisible.value = true
    return ElMessage.error('请先登录')
  }
  if (followFlag.value === 2) {
    const params = [{
      serviceName: 'srvjk_follow_delete',
      data: [{
        id: tempId.value,
      }],
      condition: [{
        colName: 'id',
        value: tempId.value,
        ruleType: 'eq',
      }],
    }]
    userUnFollowDoctor(params).then((res) => {
      collectSelect()
    })
  }
  else if (followFlag.value === 1) {
    const params = [{
      serviceName: 'srvjk_follow_add',
      data: [{
        expert_id: fileData.value.uid,
      }],
      condition: [],
    }]
    userFollowDoctor(params).then((res) => {
      collectSelect()
    })
  }
}
// 获取用户收藏
function collectSelect() {
  if (!isLogin.value) {
    // 未登录 不查询用户关注列表
    return
  }
  const params = {
    page: {
      pageNo: 1,
      rownumber: 10,
    },
    condition: [{
      // colName: "target_id",
      colName: 'expert_id',
      ruleType: 'eq',
      value: fileData.value.uid,
    }],
  }
  userFollowDoctorSelect(params).then((res) => {
    if (res.data.length != 0) {
      tempId.value = res.data[0].id
      followFlag.value = 2
    }
    else {
      followFlag.value = 1
    }
  })
}
</script>

<template>
  <div class="py-100px">
    <ClientOnly>
      <!-- <PublicSearch type="全部" />
			<PublicSearchDialog type="全部" /> -->
      <div class="px-40">
        <div class="bg-#fff">
          <CommonPageContainer :title="title" :path="routePath">
            <div class="mt-20px flex justify-between">
              <div class="w-83% bg-#F7F9FD">
                <div class="w-40% flex items-center p-5 text-size-18px">
                  <div
                    class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                    style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                    @click="router.back()"
                  >
                    <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                      <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                    </div>
                  </div>
                  <div class="pl-5 text-#AC8358 font-700">
                    人物简介
                  </div>
                </div>
                <div class="m-5 flex bg-#FFF p-5">
                  <div class="min-w-200px w-15% flex justify-center">
                    <img
                      class="h-88px w-88px" style="border-radius: 44px;" :src="getImgUrl(fileData.personal_img)"
                      alt=""
                    >
                  </div>
                  <div class="w-85% p-5">
                    <div class="flex items-center">
                      <div class="font-bold" text="#AC8358 20px">
                        {{ fileData.name }}
                      </div>
                      <el-divider direction="vertical" />
                      <div class="font-bold" text="#AC8358 20px">
                        {{ fileData.position }}
                      </div>
                    </div>
                    <div class="py-2 text-18px font-semibold">
                      <span>朝代：</span><span>{{ fileData.organ_name?? '未知' }}</span>
                    </div>
                    <!-- <div class="py-2 text-18px font-semibold">
                      <span>所在职位：</span><span>{{ fileData.department_name }}</span>
                    </div>
                    <div class="py-2 text-18px font-semibold">
                      <span>出生时间：</span><span>{{ fileData.work_time }}</span>
                    </div> -->
                    <!-- <div class="w-20% flex justify-between py-2">
                      <el-button
                        color="#AC8358" :icon="ChatLineRound" style="color:#FFF"
                        @click="toConsult(fileData)"
                      >
                        咨询
                      </el-button>
                      <el-button color="#AC8358" :icon="Star" plain @click="changeArticleFollow(fileData.id)">
                        {{
                          followFlag === 1 ? '关注' : '已关注' }}
                      </el-button>
                      <el-button color="#AC8358" :icon="Share" plain @click="copyUrl">
                        分享
                      </el-button>
                    </div> -->
                  </div>
                </div>
                <div class="m-5 bg-#FFF p-5">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#AC8358 20px">简介</span>
                  </div>
                  <div class="py-5 h-500px">
                    {{ fileData.brief_introduction }}
                  </div>
                  <!-- <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#AC8358 20px">擅长</span>
                  </div>
                  <div class="py-5">
                    {{ fileData.be_good_at }}
                  </div> -->
                </div>
                <!-- <div class="m-5 bg-#FFF p-5">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#AC8358 20px">专家作品</span>
                  </div>
                  <div class="p-5">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                      <el-tab-pane label="全部" name="全部">
                        <PublicExpertList :list="listAll" @click-item="clickDataItem" />
                      </el-tab-pane>
                      <el-tab-pane label="文章" name="文章">
                        <PublicExpertList :list="listAll" @click-item="clickDataItem" />
                      </el-tab-pane>
                      <el-tab-pane label="视频" name="视频">
                        <PublicExpertList :list="listAll" @click-item="clickDataItem" />
                      </el-tab-pane>
                      <el-tab-pane label="音频" name="音频">
                        <PublicExpertList :list="listAll" @click-item="clickDataItem" />
                      </el-tab-pane>
                      <el-tab-pane label="问答" name="问答">
                        <PublicExpertList :list="listAll" @click-item="clickDataItem" />
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div> -->
              </div>
              <div class="min-w-180px w-15%">
                <div>
                  <div
                    class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                    style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                  >
                    <img src="/img/tj.png" alt="">
                    <div class="pl-15px" text="#fff 16px">
                      推荐
                    </div>
                  </div>
                  <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #AC8358">
                    <div
                      v-for="item in TJlist" class="w-100% flex cursor-pointer justify-between p-2"
                      hover="text-#AC8358" @click="clickItem(item)"
                    >
                      <img class="inline-block w-40%" :src="getImgUrl(item.personal_img)" alt="">
                      <div class="w-58%">
                        <div class="flex justify-between">
                          <div class="" text="12px">
                            {{ item.name }}
                          </div>
                          <!-- <div
                            class="p-1px"
                            style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);border-radius: 3px;"
                            text="#fff 12px"
                          >
                            咨询
                          </div> -->
                        </div>
                        <div text="12px" class="py-2">
                          {{ item.organ_name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CommonPageContainer>
        </div>
      </div>
    </ClientOnly>
  </div>
</template>

<style scoped>
:deep() .el-tabs__item.is-active {
  color: #AC8358;
}

:deep() .el-tabs__item {
  font-size: 18px;
  font-weight: 600;
}

/* :deep() .el-tabs__nav-wrap::after{
        background-color: #AC8358;
    } */
:deep() .el-tabs__item:hover {
  color: #AC8358;
}

/* 下划线颜色 */
:deep() .el-tabs__active-bar {
  background-color: #AC8358;
}
</style>
